<template>
  <div>
    <div>
      <div style="background-color: chocolate">
        <h2>工序列表</h2>
      </div>
      <el-button type="success" @click="dialogVisibleAdd = true"
        >添加</el-button
      >
      <!--子路由添加-->
      <el-dialog title="提示" :visible.sync="dialogVisibleAdd" width="70%">
        <PorAdd @ProAdd="ProAdd"></PorAdd>
      </el-dialog>

      <!--高级查询-->
      <el-button
        @click="drawer = true"
        type="primary"
        style="margin-left: 50px"
      >
        高级查询
      </el-button>
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
        style="width: 100%; height: 140%"
      >
        <table>
          <tr>
            <td>工序编号</td>
            <td>
              <el-input
                v-model="Process_BianHao"
                placeholder="请输入内容"
              ></el-input>
            </td>

            <td>工序名称</td>
            <td>
              <el-input
                v-model="Process_Name"
                placeholder="请输入内容"
              ></el-input>
            </td>

            <td>报工权限</td>
            <td>
              <el-select v-model="Reporting_Id" placeholder="请选择">
                <el-option
                  v-for="item in GetResults"
                  :key="item.Reporting_Id"
                  :label="item.Reporting_Name"
                  :value="item.Reporting_Id"
                >
                </el-option>
              </el-select>
            </td>
          </tr>

          <tr>
            <td>报工数配比</td>
            <td>
              <el-input v-model="PeiBiMin" placeholder="请输入内容"></el-input>-
              <el-input v-model="PeibiMax" placeholder="请输入内容"></el-input>
            </td>

            <td>不良品项列表</td>
            <td>
              <el-select v-model="Defective_Id" placeholder="请选择">
                <el-option
                  v-for="item in GetDefective"
                  :key="item.Defective_Id"
                  :label="item.Defective_Name"
                  :value="item.Defective_Id"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>创建时间</td>
            <td>
              <el-date-picker
                v-model="dateMax"
                type="date"
                placeholder="开始日期"
              >
              </el-date-picker
              >-
              <el-date-picker
                v-model="dateMin"
                type="date"
                placeholder="结束日期"
              >
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td><el-button type="success" @click="Show()">查询</el-button></td>
            <td><el-button type="warning">重置</el-button></td>
            <td><el-button type="danger" @click="Guanbi">关闭</el-button></td>
          </tr>
        </table>
      </el-drawer>

      <!--显示-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="Process_Id" label="" width="180">
        </el-table-column>
        <el-table-column prop="Process_BianHao" label="工序编号" width="180">
        </el-table-column>

        <el-table-column prop="Process_Name" label="工序名称">
        </el-table-column>

        <!--报公权限-->
        <el-table-column prop="Reporting_Name" label="报公权限" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.Reporting_Name }}</p>

              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.Reporting_Name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <!--报公参数比-->
        <el-table-column prop="Defective_Name" label="不良品相列表" width="180">
        </el-table-column>

        <el-table-column prop="Process_DuiBi" label="报工数对比" width="180">
        </el-table-column>

        <el-table-column prop="CreateDate" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="CreatorId" label="创建人" width="180">
        </el-table-column>
        <el-table-column prop="UpdateDate" label="修改时间" width="180">
        </el-table-column>
        <el-table-column prop="Updator" label="修改人" width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import PorAdd from "../../components/ProcesComponent/ProcesAdd.vue";
export default {
  components: {
    PorAdd,
  },
  data() {
    return {
      tableData: [],
      drawer: false,
      direction: "ttb",
      dialogVisibleAdd: false, //添加对话框
      //查询条件
      Process_BianHao: "",
      Process_Name: "",
      Defective_Id: "",
      Reporting_Id: "",
      PeiBiMin: "",
      PeibiMax: "",
      dateMin: "",
      dateMax: "",
    };
  },
  methods: {
    Show() {
      this.axios
        .get("http://localhost:5255/api/ProcEs/ProCcessShow", {
          params: {
            Process_BianHao: this.Process_BianHao,
            Process_Name: this.Process_Name,
            Defective_Id: this.Defective_Id || 0,
            Reporting_Id: this.Reporting_Id || 0,
            PeiBiMin: this.PeiBiMin || 0,
            PeibiMax: this.PeibiMax || 0,
            dateMax: this.dateMax,
            dateMin: this.dateMin,
          },
        })
        .then((dcs) => {
          this.tableData = dcs.data.Data;
        });
      //关闭对话框
      this.drawer = false;
    },

    Guanbi() {
      //关闭对话框
      this.drawer = false;
    },

    //报工
    ResultShow() {
      this.axios
        .get("http://localhost:5255/api/ProcEs/GetResult")
        .then((dx) => {
          this.GetResults = dx.data.Data;
        });
    },
    //不良品项列表
    DefectiveShow() {
      this.axios
        .get("http://localhost:5255/api/ProcEs/GetDefective")
        .then((dx) => {
          this.GetDefective = dx.data.Data;
        });
    },

    //关闭添加
    ProAdd() {
      this.dialogVisibleAdd = false;
      this.Show();
    },
  },

  created() {
    this.Show();
    this.ResultShow();
    this.DefectiveShow();
  },
};
</script>
<style>
</style>